<template>
  <div>
    <div class="flex">
      <zbStore ref="storeRef" @selStore="selStore" />
      <div class="flex1" style="width: 60%">
        <zbTable ref="tableRef" :api-fun="get_list" @action="action">
          <template #toolbar>
            <a-space>
              <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
                <template #icon>
                  <plus-outlined />
                </template>
                <span>新建</span>
              </a-button>
            </a-space>
          </template>
        </zbTable>
      </div>
    </div>
    <!-- 新建/弹窗 -->
    <add
      v-if="showEdit"
      v-model:visible="showEdit"
      :editDataId="editDataId"
      @done="done"
    />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
      ><p>删除后无法恢复，请谨慎操作</p></a-modal
    >
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { get_list } from '@/api/user/store_role';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { actionFn } from '@/utils/action.js';
  import zbTable from '@/components/zbTable/index.vue';
  import add from './components/add.vue';

  // 当前编辑数据
  const current = ref(null);
  // 是否显示编辑弹窗
  const showEdit = ref(false);
  // 编辑数据
  const editDataId = ref(null);
  // 编辑按钮数据
  const actionData = ref({});
  // 获取子组件
  const tableRef = ref(null);
  const actionStatus = ref('add');
  const storeId = ref(null);
  const popconfirm = ref(false);

  const selStore = (val) => {
    storeId.value = String(val.code);
  };
  /* 打开添加弹窗 */
  const openEdit = (row) => {
    if (!storeId.value) {
      return message.error('请先选择门店');
    }
    editDataId.value = '';
    current.value = row ?? null;
    showEdit.value = true;
    actionStatus.value = 'add';
    actionData.value = { url: '/user/store_role/add' };
  };

  /* 打开编辑弹窗 */
  const action = (data) => {
    editDataId.value = data.row_data.id;
    actionData.value = data.action_data;
    if (actionData.value.type == 'delete') {
      popconfirm.value = true;
    } else {
      showEdit.value = true;
      actionStatus.value = 'edit';
    }
  };
  const delFun = () => {
    done({ id: editDataId.value });
  };
  const done = (form) => {
    //console.log('form123', actionData.value, form);
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    popconfirm.value = false;
    tableRef.value.reload();
  };
</script>
